<template>
    <input ref="input16"  class="kw16" value="单鑫大妹子"/>
</template>
<script setup>
import {ref ,onMounted ,reactive ,toRef} from "vue";
    let input16 = ref(null);
    // console.log(input16.value)
    onMounted(()=>{
        // onMounted里面才能操作DOM
        console.log(input16.value.value)
        input16.value.focus()
    })
    
    // ref在声明时候名字是对应标签的ref的名字等于null
    // 此时在JS里面该名字就是当前标签
        const state = reactive({
            foo: 1,
            bar: 2
        })

        const fooRef = toRef(state, 'foo')//toRef(reactive对象, 取出来的值)
        // let fooRef = ref(state.foo)
        // toRef toRefs区别 
        // toRef一个一个转成ref对象
        //toRefs 将reactive里面所有值一起转成ref对象 
        console.log(fooRef)
        // // 更改该 ref 会更新源属性
        // fooRef.value++
        // console.log(state.foo) // 2

        // // 更改源属性也会更新该 ref
        // state.foo++
        // console.log(fooRef.value) // 3
</script>